<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css代码</title>


    <!-- style 标签可以放到代码中的任意位置 -->
    <!-- p 选择器  {}中的css属性, 是可以写一个或者多个, 每个属性都是一个键值对, 键和值之间使用:分割 键值对之间使用;分割  每个键值对可以独占一行, 也可以不独占-->
    
    <!-- 内部样式 -->
    <!-- <style>
        p{
            color: green;
            font-size: 30px;
        }
    </style> -->

    <!-- 引入外部样式表 -->
    <!-- <link rel="stylesheet" href="./style.css"> -->

</head>
<body>

    <!-- 内联样式 -->
    <!-- <p style="color: red; font-size: 40px;"> 
        这是一个段落
    </p>

    <p style="color: green; font-size: 40px;"> 
        这是另一个段落
    </p> -->


    <!-- <p>
        welcome to xian
    </p> -->




    <!-- 1.标签选择器 -->
    <!-- <p>
    <style>
        p{
            color: pink;
            font-size: 30px;
        }

    </style>
    
        这是一个段落
    </p>

    <p>
        这是另一个段落
    </p>
    -->

    <!-- 2.类选择器 -->
    <!-- <style>
        /* .one 定义了一个CSS类,名字叫one */
        .one{
            color: yellow;
        }
        .two{
            color: black;
        }
        .three{
            color: gray;
        }
        .four{
            font-size: 30px;
        }
    </style>

    <div class="one four">
        这是第一个div
    </div> 
    <div class="two">
        这是第二个div
    </div> 
    <div class="three">
        这是第三个div
    </div>  -->


    
    <!-- 3.ID选择器 -->
    <!-- <style>
        #oneDiv{
            color: antiquewhite;
        }
    </style>
    

    <div id="oneDiv">
        这是一个div
    </div>
    <div id="twoDiv">
        这是另一个div
    </div> -->



    <!-- 后代选择器 -->
    <!-- 先去页面中找所有的 ul, 再ul中找所有的li li只要是ul的后代即可, 不一定非得是'子元素' -->
    <!-- <style>
        ul li{
            color: red;
        }
    </style>
    <ol>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ol>
    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ul> -->
    

    <!-- 子选择器 -->
    <!-- <style>
        .one>a{
            color: red;
        }
     </style>

     <div class="one">
        <a href="#">链接1</a>
        <p>
            <a href="#">链接2</a>
        </p>
     </div>  -->


     <!-- 并集选择器 -->
     <!-- <style>
        .two, .three{
            color: blueviolet;
            font-size: 40px;
        }
     </style>
     

     <div class="one">
        <a href="#" class="two">链接1</a>
        <p>
            <a href="#" class="three">链接2</a>
        </p>
     </div>  -->

    <!-- 伪类选择器 -->
    <!-- <style>
        .one:hover{
            color: red;
            font-size: 20px;
        }

        .one:active{
            color: green;
            font-size: 20px;
        }
    </style>

    <div class="one">
        这是一个div
    </div> -->



    <!-- 设置字体 -->
    <style>
        .one{
            font-size: 30px;
            font-family: '微软雅黑';
            font-weight: bold;
            font-style: italic;
            color: rgb(30, 167, 167);
            text-align: left;
            text-decoration: underline;
            text-indent:2em;

            line-height: 60px;

            /* background-color: yellowgreen; */
            background-image: url(../image/tiger.jfif);
            background-repeat: no-repeat;
            background-position: center center;
            background-size: 2000px 1200px;

            height: 1000px

        }

        .two{
            font-size: 40px;
            font-family: '宋';
            font-weight: normal;
        }

        .three{
            width: 200px;
            height: 100px;
            background-color: orange;
            color: #fff;

            text-align: left;
            /* line-height: 100px; */

            border-radius: 50px;

            border: 5px black dashed;
            box-sizing: border-box;   

            padding:  10px;

            margin: auto;
        }


    </style>

    <!-- <div class="one">
        这是一个div 
        <br> 长河落日圆
    </div> 

    <div class="two">
        这是另一个div
    </div>  -->


    <div class="three">
        大漠孤烟直
    </div>

    <div class="three">
        长河落日圆
    </div>


</body>
</html>